<template>
  <!-- 标签栏 -->
  <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange">
    <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key"></van-tab>
  </van-tabs>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="load"
    >
      <!-- 商品卡片 -->
      <van-card
        v-for="(item,key) in list"
        :key="key"
        :title="item.info.products.name"
        :thumb="item.info.products.thumbs_text"
        :num="item.pronum"
        :tag="item.info.products.flag_text"
      >
        <template #title>
          <div class="title">订单号：{{ item.code }}</div>
        </template>

        <!-- 卡片的插槽部分  -->
        <template #desc v-if="item.info.attrs">
          <van-tag v-for="(val,key) in item.info.attrs" :key="key" class="tag" type="primary">{{val.value}}</van-tag>
        </template>
        <template #desc v-else>
          <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
          <div class="price">下单时间：{{  item.createtime_text}}</div>
        </template>

        <template #price>
          <div class="price">订单总价：￥{{ item.amount }}</div>
        </template>

        <template #footer>
          <!-- status = 1 仅退款 -->
          <van-button v-if="item.status==1" class="button" type="danger" size="small" @click="OrderClick(item.id)">申请退款</van-button>

          <!-- status = 2 -->
          <van-button v-if="item.status==2" class="button" type="success" size="small" @click="OrderConfirm(item.id)">确认收货</van-button>
          <van-button v-if="item.status==2" class="button" type="warning" size="small" @click="OrderExpress(item.id)">物流详情</van-button>
          
          <!-- status = 3 已收货 -->
          <van-button v-if="item.status==3 || item.status==4" class="button" type="warning" size="small" @click="OrderComment(item.id)">{{ item.status==3?'立即评价':'查看评价' }}</van-button>
          <!-- status = -1 退款中 -->
          <van-button v-if="item.status==-1" class="button" type="danger" size="small" disabled>退款中</van-button>
          <van-button class="button" type="primary" size="small" @click="OrderInfo(item.id)">订单详情</van-button>
        </template>
      </van-card>
    </van-list>
  </van-pull-refresh>

  <!-- 退款的弹框 -->
  <van-popup v-model:show="ApplyShow" position="bottom">
    <van-form @submit="OrderApplyConfirm">
      <van-field
        v-model="remark"
        name="remark"
        rows="5"
        autosize
        type="textarea"
        maxlength="120"
        placeholder="请输入申请原因"
        show-word-limit
        :rules="[{ required: true, message: '请填写申请原因' }]"
      />
      <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交申请</van-button>
    </van-form>
  </van-popup>
</template>

<script setup>
  const {proxy} = getCurrentInstance()
  //传递的值
  let busid = proxy.$business.value.id;
  
  //标签栏数据
  let StatusActive = ref('')
  let StatusList = ref([
    {title: '全部', value: ''},
    {title: '已支付', value: '1'},
    {title: '已发货', value: '2'},
    {title: '已收货', value: '3'},
    {title: '已完成', value: '4'},
    {title: '退货退款', value: '-1'},
  ])

  //下拉刷新的数据
  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新

  // 申请仅退款
  let orderid = ref(0)
  let ApplyShow = ref(false)
  let remark = ref('')
  onMounted(()=>{
    load()
  })
  // 标签栏切换
  const TabChange = async ({ name }) => 
  {
    refresh()
  }

  //下拉刷新
  const refresh = async () =>
  {
    //清空查询参数
    page.value = 1
    list.value = []
    finished.value = false
    loading.value = true
    //加载数据方法
    load()
  }
  //点击退款传值
  const OrderClick = (val) =>{
      ApplyShow.value = true;
      orderid.value = val;
  }

  //加载数据方法 查询订单数据
  const load = async () =>
  {
    //判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }
    var params = {
      busid:busid,
      page:page.value,
      status:StatusActive.value
    }
        //发送请求
    var res = await proxy.$POST({
      url:'/business/order',
      params
    })

    //请求发送完毕后，加载状态也就完毕了
    loading.value = false
    if(res.code == 0)
    {
      //如果没有更多数据了 就说明已经加载到底了....
      finished.value = true
      return false
    }
      // 合并数组
      
      //数据修改
      res.data.map(item => {
      //存在info的情况下
      if(item.info && item.info.attrs)
      {
        item.info.attrs = JSON.parse(item.info.attrs)
      }
    })
      list.value = list.value.concat(res.data)
      page.value++; //页数改变
  }

  //跳转订单详情
  const OrderInfo = (orderid) => proxy.$router.push({path:'/order/info',query:{orderid:orderid}})

  //立即评价
  const OrderComment = (orderid) =>{
    proxy.$router.push({path:'/order/comment',query:{orderid:orderid}})
  }
  //确认收货
  const OrderConfirm = (orderid)=>{
    proxy.$confirm({
      message:'是否确认收货!'
    }).then(async ()=>{
      var result = await proxy.$POST({
        url:'/order/confirm',
        params:{orderid:orderid,busid:busid}
      })
      if(result.code==0){
        proxy.$fail(result.msg)
        return false
      }
      refresh()
    }).catch(async ()=>{
        console.log('用户取消!')
    })
 
  }
  //跳转物流界面
  const OrderExpress = (orderid)=>{
    proxy.$router.push({path:'/order/express',query:{orderid:orderid}})
  }
  //退款申请
  const OrderApplyConfirm = async (val)=>{
      ApplyShow.value = false
      var params = {
        busid:busid,
        orderid:orderid.value,
        remark:remark.value
      }
      //退款需要的值 busid orderid remark
      var result = await proxy.$POST({
        url:'/order/apply',
        params
      })
      if(result.code==0){
        proxy.$fail(result.msg)
        return false
      }
      proxy.$success(result.msg);

      refresh();
  }
</script>


<style scoped>
  @import url('/assets/css/OrderIndex.css');
</style>
  